<template>
<div>
  <div @click="like(item.dogName)" class="my_div" v-for="(item,index) in arr" :key="index">
    <img
      :src="item.dogImgUrl"
      alt=""
    />
    <p @click="changeColor" :style="{backgroundColor:color}"> {{item.dogName}} </p>
  </div>
  </div>
</template>

<script>
export default {
  props:['arr'],
  data(){
    return {
      color:'rgb(255,255,255)',
    }
  },
  methods:{
    changeColor(){
     this.color = `rgb(${parseInt(Math.random()*255)},${parseInt(Math.random()*255)},${parseInt(Math.random()*255)})` 
    },
    like(dogName){
      this.$emit('dogName', dogName);
    }
  }
};
</script>

<style>
.my_div {
  width: 200px;
  border: 1px solid black;
  text-align: center;
  float: left;
}

.my_div img {
  width: 100%;
  height: 200px;
}
</style>